<template>
  <div class="AdminSignup">
    <!-- 注册信息表单 -->
    <el-form
      :model="Info"
      :rules="rules"
      ref="Info"
      class="demo-Info"
      label-width="100px"
    >
      <el-form-item>
        <h2 class="title" style="">新用户注册</h2>
      </el-form-item>
      <el-form-item prop="username" label="账户名" required>
        <el-input v-model="Info.username" placeholder="账户名"></el-input>
      </el-form-item>
      <el-form-item prop="password" label="密码" required>
        <el-input
          v-model="Info.password"
          placeholder="密码"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item prop="password2" label="确认密码" required>
        <el-input
          v-model="Info.password2"
          placeholder="确认密码"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item prop="id" label="身份证号" required>
        <el-input v-model="Info.id" placeholder="身份证号"></el-input>
      </el-form-item>
      <el-form-item prop="name" label="姓名" required>
        <el-input v-model="Info.name" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item prop="corridornumber" label="楼栋号" required>
        <el-input
          v-model.number="Info.corridornumber"
          placeholder="楼栋号"
        ></el-input>
      </el-form-item>
      <el-form-item prop="telephone" label="联系电话" required>
        <el-input
          v-model="Info.telephone"
          placeholder="联系电话"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="subForm('Info')"
          style="margin-right: 0px;"
          >立即注册</el-button
        >
        <el-button @click="signup">用户注册</el-button>
        <el-button @click="resetForm('Info')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "AdminSignup",
  //返回新生成的组件相关数据
  data() {
    //密码验证规则，保证两次输入的内容一致
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.Info.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      Info: {
        username: "",
        password: "",
        password2: "",
        id: "",
        name: "",
        sex: "",
        age: "",
        roomnumber: "",
        corridornumber: "",
        telephone: "",
      },
      //定义表单验证规则
      rules: {
        username: [
          { required: true, message: "请输入账户名", trigger: "blur" },
          {
            min: 5,
            max: 20,
            message: "长度大于5个字符并小于 20个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 8, message: "长度大于8个字符", trigger: "blur" },
        ],
        password2: [
          { required: true, message: "请确认密码", trigger: "blur" },
          { validator: validatePass, trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        id: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          {
            pattern: /^\d{17}[0-9|x]$/,
            message: "身份证号格式不正确",
            trigger: "blur",
          },
        ],
        corridornumber: [
          { required: true, message: "请输入楼栋号", trigger: "blur" },
          { type: "number", message: "楼栋号必须为数字值", trigger: "blur" },
          {
            pattern: /^\d{2}$/,
            message: "楼栋号格式不正确",
            trigger: "blur",
          },
        ],
        telephone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,
            message: "手机号码格式不正确",
            trigger: "blur",
          },
        ],
      },
    };
  },
  //前端测试路由拦截器，查看发送的请求正确与否
  /*mounted(){
  		this.axios.interceptors.request.use(config => {
  			console.log(config)
  			return config
  		},error =>{
  			return Promise.reject(error)
  		})
  	},*/
  methods: {
    //提交注册信息组件
    subForm(info) {
      //判断输入的数据是否符合表单规则
      this.$refs[info].validate((valid) => {
        if (valid) {
          //向后端传送请求查看当前用户名是否被使用
          this.$axios
            .get("/api/username/" + this.Info.username)
            .then((response) => {
              if (response.data.count > 0) {
                alert("账户名已存在");
              } else {
                // this.Info.telephone = parseInt(this.Info.telephone);
                //this.axios.post("/users/",this.qs.stringify(this.Info))
                //向后端传送用户数据
                this.$axios
                  .post("/api/register/admin", this.Info)
                  .then((response) => {
                    console.log(response);
                    alert("注册成功");
                    //跳转至登录界面
                    this.$router.push({
                      name: "AdminSignin",
                      path: "/AdminSignin",
                    });
                  })
                  .catch((error) => {
                    alert("注册失败，密码需要同时包含数字和字母"); //错误提示
                    console.log(error);
                  });
              }
            })
            .catch((error) => {
              console.log(error);
            });
        } else {
          console.log("error!");
          return false;
        }
      });
    },
    //刷新用户输入表单
    resetForm(info) {
      this.$refs[info].resetFields();
    },
    signup() {
      this.$router.push({ name: "signup", path: "/signup" });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 这里是个人信息的相关css表 */

/*表单样式*/
.AdminSignup {
  display: flex;
  justify-content: center;
}

/*详细信息样式*/
.demo-Info {
  text-align: center;
  width: 450px;
}
</style>
